<template>
  <div id="fourth">
    <div class="content">
      <el-row class="el_t_20">
        <el-col :span="24">
          <el-autocomplete
            class="el_long"
            v-model="info.name"
            :fetch-suggestions="querySearch"
            placeholder="新增检查"
            @select="handleSelect"
          ></el-autocomplete>
        </el-col>
        <el-col :span="24" class="el_t_20">
          <template v-if="list.length > 0">
            <el-table :data="list" :row-class-name="tableRowClassName" :default-expand-all="true">
              <el-table-column type="expand" width="-10">
                <template slot-scope="props">
                  <div v-if="props.row.index === 1" class="expand_box">
                    <el-form :model="info" :rules="rules" label-width="100px">
                      <el-row :gutter="20">
                        <el-col :span="12">
                          <el-form-item label="阈值模式：" prop="name">
                            <el-select v-model="info.name" placeholder="请选择阈值模式" class="el_long">
                              <el-option label="请选择阈值模式" :value="1"></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="线圈：" prop="name">
                            <el-select v-model="info.name" placeholder="请选择线圈类型" class="el_long">
                              <el-option label="请选择线圈类型" :value="1"></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row :gutter="20">
                        <el-col :span="12">
                          <el-form-item label="阈值：" prop="name">
                            <el-checkbox-group v-model="info.list">
                              <el-checkbox label="左"></el-checkbox>
                              <el-checkbox label="右"></el-checkbox>
                            </el-checkbox-group>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="治疗部位：" prop="name">
                            <el-select v-model="info.name" placeholder="请选择治疗部位" class="el_long">
                              <el-option label="请选择治疗部位" :value="1"></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row :gutter="20">
                        <el-col :span="12">
                          <el-form-item label="治疗模式：" prop="name">
                            <el-select v-model="info.name" placeholder="请选择治疗模式" class="el_long">
                              <el-option label="请选择治疗模式" :value="1"></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="频率(HZ)：" prop="name">
                            <el-select v-model="info.name" placeholder="请选择治疗频率" class="el_long">
                              <el-option label="请选择治疗频率" :value="1"></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row :gutter="20">
                        <el-col :span="12">
                          <el-form-item label="强度(%)：" prop="name">
                            <el-select v-model="info.name" placeholder="请选择治疗强度" class="el_long">
                              <el-option label="请选择治疗强度" :value="1"></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="脉冲(个)：" prop="name">
                            <el-select v-model="info.name" placeholder="请选择脉冲个数" class="el_long">
                              <el-option label="请选择脉冲个数" :value="1"></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form>
                  </div>
                  <div v-if="props.row.index === 2" class="expand_box">
                    <el-form :model="info" :rules="rules" label-width="100px">
                      <el-row :gutter="20">
                        <el-form-item label="神经递质：" prop="name">
                          <template v-for="(item,index) in info.list">
                            <el-col :span="8" :class="{el_t_10 :index > 0}">
                              <el-select v-model="info.name" placeholder="请选择线圈类型" class="el_long">
                                <el-option label="请选择线圈类型" :value="1"></el-option>
                              </el-select>
                            </el-col>
                            <el-col :span="8" :class="{el_t_10 :index > 0}">
                              <el-select v-model="info.name" placeholder="请选择线圈类型" class="el_long">
                                <el-option label="请选择线圈类型" :value="1"></el-option>
                              </el-select>
                            </el-col>
                            <el-col :span="8" :class="{el_t_10 :index > 0}">
                              <el-button
                                type="info"
                                plain
                                icon="el-icon-plus"
                                class="tool-btn"
                                @click="addLine"
                              ></el-button>
                              <el-button
                                v-if="info.list.length > 1"
                                type="info"
                                plain
                                icon="el-icon-minus"
                                class="tool-btn"
                                @click="minusLine(index)"
                              ></el-button>
                            </el-col>
                          </template>
                        </el-form-item>
                      </el-row>
                    </el-form>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="诊疗项目" prop="name" width="150">
                <template slot-scope="data">
                  <template v-if="data.row.index !== 4">
                    <span class="cell_head" v-html="data.row.name"></span>
                  </template>
                  <template v-else>
                    <el-input type="text" v-model="data.row.name"></el-input>
                  </template>
                </template>
              </el-table-column>
              <el-table-column label="开单数" prop="count" width="150">
                <template slot-scope="data">
                  <el-select v-model="data.row.count" placeholder="请选择数量">
                    <el-option :label="1" :value="1"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="疗程周期" prop="count" width="150">
                <template slot-scope="data">
                  <el-select v-model="data.row.count" placeholder="请选择疗程周期">
                    <el-option :label="1" :value="1"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="备注" prop="remark" min-width="250">
                <template slot-scope="data">
                  <el-input type="text" placeholder="填写描述"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="单价" width="150">
                <template slot-scope="data">￥
                  <el-input type="text" v-model="data.row.no" style="width:calc(100% - 2em);"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="data">
                  <el-button type="primary" size="mini" plain @click="deleteItem(data)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <template v-else>
            <p class="label">暂无开具新诊疗项目</p>
          </template>
        </el-col>
        <el-col :span="24">
          <p class="title">历史诊疗记录单：</p>
          <template v-if="list.length > 0">
            <el-row class="title el_t_20">
              <el-col :span="2" class="title-tag" style="padding-left:10px;">开单时间</el-col>
              <el-col :span="22" class="line-tag">
                <el-col :span="6">诊疗项目</el-col>
                <el-col :span="4">开单医生</el-col>
                <el-col :span="3">开单数(总)</el-col>
                <el-col :span="3">已诊(总)</el-col>
                <el-col :span="4">疗程周期</el-col>
                <el-col :span="3">金额</el-col>
                <el-col :span="1">&nbsp;</el-col>
              </el-col>
            </el-row>
            <template v-for="(item,index) in list">
              <el-row class="list">
                <el-col :span="2" class="text-right title-tag" style="padding: 20px 0 0;">
                  <div class="state">
                    <p class="s_p">2018.11.12</p>
                    <em class="s_e">12:23:43</em>
                    <el-button
                      type="text"
                      :disabled="index===0"
                      icon="el-icon-circle-close-outline"
                    >取消</el-button>
                  </div>
                </el-col>
                <el-col :span="22" class="line" :class="{active:index===0}">
                  <div class="line-row" @click="item.flag=!item.flag">
                    <el-col :span="6">{{item.name}}</el-col>
                    <el-col :span="4">孙医生</el-col>
                    <el-col :span="3">
                      10
                      <em class="more-count">(10)</em>
                    </el-col>
                    <el-col :span="3">
                      1
                      <em class="more-count">(1)</em>
                    </el-col>
                    <el-col :span="4">1日2次</el-col>
                    <el-col :span="3">
                      ￥5,00
                      <em>×5</em>
                    </el-col>
                    <el-col :span="1" class="text-center">
                      <i class="list-icon el-icon-caret-bottom" :class="{rotate:item.flag}"></i>
                    </el-col>
                  </div>
                  <div class="line-more" v-if="item.flag">
                    <template v-if="index === 0">
                      <el-row>
                        <el-col :span="3" class="text-right title-tag" style="padding-right:10px;">
                          <div class="state">
                            <p class="s_p">2018.11.12</p>
                            <em class="s_e active">已诊疗</em>
                          </div>
                        </el-col>
                        <el-col :span="21" class="more-right">
                          <div class="line-text">
                            <el-row class="more-line">
                              <el-col :span="5">孙医生</el-col>
                              <el-col :span="5">1/10</el-col>
                            </el-row>
                            <el-row class="more-line">
                              <el-col :span="3" class="more-name">阈值模式：</el-col>
                              <el-col :span="5" class="more-text">静息目测</el-col>
                              <el-col :span="3" class="more-name">线圈：</el-col>
                              <el-col :span="5" class="more-text">8型线圈</el-col>
                              <el-col :span="3" class="more-name">阈值：</el-col>
                              <el-col :span="5" class="more-text">左 右</el-col>
                            </el-row>
                            <el-row class="more-line">
                              <el-col :span="3" class="more-name">治疗部位：</el-col>
                              <el-col :span="5" class="more-text">左侧额叶</el-col>
                              <el-col :span="3" class="more-name">治疗模式：</el-col>
                              <el-col :span="5" class="more-text">常规模式</el-col>
                              <el-col :span="3" class="more-name">频率(HZ)：</el-col>
                              <el-col :span="5" class="more-text">80</el-col>
                            </el-row>
                            <el-row class="more-line">
                              <el-col :span="3" class="more-name">强度(%)：</el-col>
                              <el-col :span="5" class="more-text">90</el-col>
                              <el-col :span="3" class="more-name">脉冲(个)：</el-col>
                              <el-col :span="5" class="more-text">600</el-col>
                            </el-row>
                            <el-row class="el_t_20">
                              <el-col :span="24">
                                <el-input
                                  type="textarea"
                                  v-model="moreText"
                                  :disabled="true"
                                  :rows="3"
                                ></el-input>
                              </el-col>
                              <el-col :span="24">
                                <el-button
                                  type="primary"
                                  size="mini"
                                  plain
                                  @click="review('TMS(经颅磁刺激)')"
                                >查看/编辑</el-button>
                              </el-col>
                            </el-row>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3" class="text-right title-tag" style="padding-right:10px;">
                          <div class="state">
                            <p class="s_p">2018.11.12</p>
                            <em class="s_e">待诊疗</em>
                          </div>
                        </el-col>
                        <el-col :span="21" class="more-right">
                          <div class="line-text">
                            <el-row class="more-line">
                              <el-col :span="5">-</el-col>
                              <el-col :span="5">2/10</el-col>
                            </el-row>
                            <el-row class="more-line">
                              <el-col :span="3" class="more-name">阈值模式：</el-col>
                              <el-col :span="5" class="more-text">静息目测</el-col>
                              <el-col :span="3" class="more-name">线圈：</el-col>
                              <el-col :span="5" class="more-text">8型线圈</el-col>
                              <el-col :span="3" class="more-name">阈值：</el-col>
                              <el-col :span="5" class="more-text">左 右</el-col>
                            </el-row>
                            <el-row class="more-line">
                              <el-col :span="3" class="more-name">治疗部位：</el-col>
                              <el-col :span="5" class="more-text">左侧额叶</el-col>
                              <el-col :span="3" class="more-name">治疗模式：</el-col>
                              <el-col :span="5" class="more-text">常规模式</el-col>
                              <el-col :span="3" class="more-name">频率(HZ)：</el-col>
                              <el-col :span="5" class="more-text">80</el-col>
                            </el-row>
                            <el-row class="more-line">
                              <el-col :span="3" class="more-name">强度(%)：</el-col>
                              <el-col :span="5" class="more-text">90</el-col>
                              <el-col :span="3" class="more-name">脉冲(个)：</el-col>
                              <el-col :span="5" class="more-text">600</el-col>
                            </el-row>
                            <el-row class="el_t_20">
                              <el-col :span="24">
                                <el-input type="textarea" :disabled="true" :rows="3"></el-input>
                              </el-col>
                              <el-col :span="24">
                                <el-button
                                  type="primary"
                                  size="mini"
                                  plain
                                  @click="view('TMS')"
                                >查看/编辑</el-button>
                                <el-button
                                  type="primary"
                                  size="mini"
                                  plain
                                  @click="$router.push({name:'caseRevise'})"
                                >修改套餐</el-button>
                                <el-button type="primary" size="mini" plain>删除</el-button>
                              </el-col>
                            </el-row>
                          </div>
                        </el-col>
                      </el-row>
                    </template>
                    <template v-if="index === 1">
                      <el-row>
                        <el-col :span="3" class="text-right title-tag" style="padding-right:10px;">
                          <div class="state">
                            <p class="s_p">2018.11.12</p>
                            <em class="s_e active">已诊疗</em>
                          </div>
                        </el-col>
                        <el-col :span="21" class="more-right">
                          <div class="line-text">
                            <el-row class="more-line">
                              <el-col :span="5">孙医生</el-col>
                              <el-col :span="5">1/10</el-col>
                            </el-row>
                            <el-row class="more-line">
                              <el-col :span="3" class="more-name">神经递质：</el-col>
                              <el-col :span="5" class="more-text">谷氨酸</el-col>
                              <el-col :span="3" class="more-name">时间：</el-col>
                              <el-col :span="5" class="more-text">10min</el-col>
                            </el-row>
                            <el-row class="more-line">
                              <el-col :span="3" class="more-name">神经递质：</el-col>
                              <el-col :span="5" class="more-text">甲</el-col>
                              <el-col :span="3" class="more-name">时间：</el-col>
                              <el-col :span="5" class="more-text">5min</el-col>
                            </el-row>
                            <el-row class="el_t_20">
                              <el-col :span="24">
                                <el-input
                                  type="textarea"
                                  v-model="moreText"
                                  :disabled="true"
                                  :rows="3"
                                ></el-input>
                              </el-col>
                              <el-col :span="4">
                                <el-button
                                  type="primary"
                                  size="mini"
                                  plain
                                  @click="view('L-TMS')"
                                >查看/编辑</el-button>
                              </el-col>
                            </el-row>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3" class="text-right title-tag" style="padding-right:10px;">
                          <div class="state">
                            <p class="s_p">2018.11.12</p>
                            <em class="s_e">待诊疗</em>
                          </div>
                        </el-col>
                        <el-col :span="21" class="more-right">
                          <div class="line-text">
                            <el-row class="more-line">
                              <el-col :span="5">-</el-col>
                              <el-col :span="5">2/10</el-col>
                            </el-row>
                            <el-row class="more-line">
                              <el-col :span="3" class="more-name">神经递质：</el-col>
                              <el-col :span="5" class="more-text">谷氨酸</el-col>
                              <el-col :span="3" class="more-name">时间：</el-col>
                              <el-col :span="5" class="more-text">10min</el-col>
                            </el-row>
                            <el-row class="more-line">
                              <el-col :span="3" class="more-name">神经递质：</el-col>
                              <el-col :span="5" class="more-text">甲</el-col>
                              <el-col :span="3" class="more-name">时间：</el-col>
                              <el-col :span="5" class="more-text">5min</el-col>
                            </el-row>
                            <el-row class="el_t_20">
                              <el-col :span="24">
                                <el-input type="textarea" :disabled="true" :rows="3"></el-input>
                              </el-col>
                              <el-col :span="24">
                                <el-button
                                  type="primary"
                                  size="mini"
                                  plain
                                  @click="view('心理咨询')"
                                >查看/编辑</el-button>
                                <el-button
                                  type="primary"
                                  size="mini"
                                  plain
                                  @click="view('心理治疗')"
                                >修改套餐</el-button>
                                <el-button type="primary" size="mini" plain>删除</el-button>
                              </el-col>
                            </el-row>
                          </div>
                        </el-col>
                      </el-row>
                    </template>
                    <template v-if="index === 2">
                      <el-row>
                        <el-col :span="3" class="text-right title-tag" style="padding-right:10px;">
                          <div class="state">
                            <p class="s_p">2018.11.12</p>
                            <em class="s_e">待诊疗</em>
                          </div>
                        </el-col>
                        <el-col :span="21" class="more-right">
                          <div class="line-text">
                            <el-row class="more-line">
                              <el-col :span="5">-</el-col>
                              <el-col :span="5">1/5</el-col>
                            </el-row>
                            <el-row class="el_t_20">
                              <el-col :span="24">
                                <el-input type="textarea" :disabled="true" :rows="3"></el-input>
                              </el-col>
                              <el-col :span="24">
                                <el-input type="text" :disabled="true"></el-input>
                              </el-col>
                              <el-col :span="24">
                                <el-button
                                  type="primary"
                                  size="mini"
                                  plain
                                  @click="view('脑认知功能训练')"
                                >查看/编辑</el-button>
                                <el-button
                                  type="primary"
                                  size="mini"
                                  plain
                                  @click="view('脑活动控制能力训练')"
                                >取消</el-button>
                              </el-col>
                            </el-row>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3" class="text-right title-tag" style="padding-right:10px;">
                          <div class="state">
                            <p class="s_p">2018.11.17</p>
                            <em class="s_e">待诊疗</em>
                          </div>
                        </el-col>
                        <el-col :span="21" class="more-right">
                          <div class="line-text">
                            <el-row class="more-line">
                              <el-col :span="5">-</el-col>
                              <el-col :span="5">2/5</el-col>
                            </el-row>
                            <el-row class="el_t_20">
                              <el-col :span="24">
                                <el-input type="textarea" :disabled="true" :rows="3"></el-input>
                              </el-col>
                              <el-col :span="24">
                                <el-input type="text" :disabled="true"></el-input>
                              </el-col>
                              <el-col :span="24">
                                <el-button
                                  type="primary"
                                  size="mini"
                                  plain
                                  @click="view('健康课')"
                                >查看/编辑</el-button>
                                <el-button type="primary" size="mini" plain @click="view('某某诊疗')">取消</el-button>
                              </el-col>
                            </el-row>
                          </div>
                        </el-col>
                      </el-row>
                    </template>
                  </div>
                </el-col>
              </el-row>
            </template>
          </template>
          <template v-else>
            <p class="label">暂无历史诊疗项目</p>
          </template>
        </el-col>
      </el-row>
      <el-row class="footer-fixed">
        <el-col :span="24" class="text-right">
          <el-upload class="img_upload" action="https://jsonplaceholder.typicode.com/posts/">
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <p>上传</p>
          </el-upload>
          <el-checkbox>
            患者已知签署并成功上传
            <a class="about" href="javascript:void(0);" target="_blank">《杭州泛康诊所知情同意书》</a>
          </el-checkbox>
          <el-button type="primary" plain>取消</el-button>
          <el-button type="primary" @click="submitInfo('info')">保存</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "fourth",
  data() {
    return {
      search: {
        name: ""
      },
      moreFlag: false,
      info: {
        name: "",
        phone: "",
        sex: "",
        radio: 1,
        list: [1, 2]
      },
      moreText:
        "该求助者的心理问题产生是由一次公开课发挥失常造成的，有明显的现实原因，而且有很好的自知力，也有求治愿望，从症状学来说，何某表现为焦虑、头疼、食欲下降、睡眠障碍等症状，从严重标准看，该反应强度不很强烈，反应也只局限在课堂教学的氛围内，没有影响逻辑思维，无回避与泛化，没有对社会功能造成严重影响。",
      list: [
        {
          index: 1,
          name: "TMS",
          sex: "男",
          birthday: "1956-12-10",
          no: "1812100102",
          phone: "15645541321",
          time: "2018-12-10 14:23:32",
          count: "",
          remark: "睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍",
          list: [
            {
              name: "1"
            },
            {
              name: "2"
            }
          ],
          flag: false
        },
        {
          index: 2,
          name: "L-TMS",
          sex: "男",
          birthday: "1956-12-10",
          no: "1812100102",
          phone: "15645541321",
          time: "2018-12-10 14:23:32",
          count: 1,
          remark: "睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍",
          list: [
            {
              name: "1"
            }
          ],
          flag: false
        },
        {
          index: 3,
          name: "心理咨询",
          sex: "男",
          birthday: "1956-12-10",
          no: "1812100102",
          phone: "15645541321",
          time: "2018-12-10 14:23:32",
          count: 1,
          remark: "睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍",
          list: [
            {
              name: "1"
            }
          ],
          flag: false
        },
        {
          index: 4,
          name: "某某治疗",
          sex: "男",
          birthday: "1956-12-10",
          no: "1812100102",
          phone: "15645541321",
          time: "2018-12-10 14:23:32",
          count: 1,
          remark: "睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍",
          list: [
            {
              name: "1"
            }
          ],
          flag: false
        }
      ],
      rules: {
        name: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur"
          }
        ]
      },
      restaurants: [
        {
          value: "三全鲜食（北新泾店）",
          address: "长宁区新渔路144号"
        },
        {
          value: "Hot honey 首尔炸鸡（仙霞路）",
          address: "上海市长宁区淞虹路661号"
        },
        {
          value: "新旺角茶餐厅",
          address: "上海市普陀区真北路988号创邑金沙谷6号楼113"
        },
        {
          value: "泷千家(天山西路店)",
          address: "天山西路438号"
        }
      ],
      moreList: [
        {
          name: "睡眠通用量表",
          remark: "爱泼沃、匹兹堡、PHQ-9、GAD-7"
        },
        {
          name: "神经检测",
          remark:
            "神经递质功能检测、多导睡眠系统检测、植物神经功能检神经递质功能检测、多导睡眠系统检测、植物神经功能检"
        }
      ]
    };
  },
  methods: {
    review(name) {
      this.$router.push({
        name: "caseReview",
        query: {
          name: name
        }
      });
    },
    view(name) {
      this.$router.push({
        name: "caseView",
        query: {
          name: name
        }
      });
    },
    tableRowClassName(row, rowIndex) {
      return "tr_gray";
    },
    times(val) {
      let arr = val.split(" ");
      return `<p class="s_p">${arr[0]}</p><em class="s_e">${arr[1]}</em>`;
    },
    addInfo() {
      this.$router.push({
        name: "addOffice"
      });
    },
    deleteItem(data) {
      this.list.splice(data.$index, 1);
    },
    enterMsg(data) {
      this.$confirm("确定已收取相关费用？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "点错了",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "取消成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    deleteMsg(data) {
      this.$confirm("确定取消检查？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "点错了",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "取消成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    handleSelect(item) {
      console.log(item);
    },
    addLine() {
      this.info.list.push({
        name: "",
        phone: ""
      });
    },
    minusLine(index) {
      if (this.info.list.length === 1) {
        this.$message.warning("最少有意向检查内容！");
        return false;
      }
      this.info.list.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.content {
  height: calc(100vh - 200px);
  background: #ffffff;
  position: relative;
  padding: 20px;
}

.title {
  color: #999;
  font-size: 14px;
  font-weight: bold;
  margin-top: 20px;
}
.title .el-col,
.line .el-col {
  padding: 0 5px;
}

.label {
  color: #666;
  font-size: 14px;
  text-indent: 1.5em;
}

.line-more .state {
  padding-top: 15px;
  padding-right: 20px;
}

.line-more .state em.active {
  color: #006835;
}

.state {
  width: 100%;
  font-size: 12px;
  padding-right: 40px;
}

.state.active {
  color: #ff0000;
}

.list .el-col {
  padding: 5px;
  position: relative;
}

.line {
  width: calc(100% - 100px);
  color: #666;
  font-size: 14px;
}

.line-tag {
  width: calc(100% - 100px);
}

.line-row {
  margin-top: 5px;
  overflow: hidden;
  background: #f2f2f2;
  line-height: 30px;
  position: relative;
}

.line-row .el-col:first-child {
  color: #006835;
  font-weight: bold;
}

.line-row .el-col em {
  font-style: normal;
  color: #999;
  font-size: 12px;
}

.line:before,
.line-text::before {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% + 40px);
  background: #e4e4e4;
  position: absolute;
  left: -20px;
  top: 25px;
}

.line-text::before {
  height: calc(100% + 10px);
}

/* .line-more > .el-row:last-child .line-text::before {
  display: none;
} */

.line:after,
.line-text::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  background: #e4e4e4;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  position: absolute;
  left: -24px;
  top: 25px;
}

.line.active:after {
  background: #006835;
}

.icon_print {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("./img/print.png") 0 0 no-repeat;
  background-size: 14px 14px;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -2px;
}

.icon_edit {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("./img/edit.png") 0 0 no-repeat;
  background-size: 14px 14px;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -2px;
}

.btn_print {
  color: #666;
}

.line-label {
  font-size: 12px;
}

.line-label em {
  font-style: normal;
  color: #ff9900;
  font-weight: bold;
}

.icon_tag {
  width: 54px;
  height: 34px;
  background: url("./img/tag.png") 0 0 no-repeat;
  background-size: 54px 34px;
  position: absolute;
  left: 15%;
  top: 8px;
  z-index: 9;
}

.icon_upload {
  border: 1px solid #006835;
  border-radius: 3px;
  padding: 1px;
  font-size: 12px;
  margin-right: 5px;
}

.upload {
  float: left;
  height: 30px;
  line-height: 30px;
}

.upload button {
  padding: 0 15px;
}

.img_upload {
  float: left;
  margin-left: 220px;
  width: 40px;
  height: 40px;
  background: rgba(242, 242, 242, 1);
  line-height: 16px;
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 2px;
  color: #999;
  font-size: 12px;
  text-align: center;
  padding: 0;
}

.img_upload p {
  margin: 0;
}

.about {
  color: #006835;
  margin-right: 20px;
}

.el-input-group__append button {
  background: #fff;
  border-left: 0;
}

.tool-btn {
  padding: 12px;
}

.more-line {
  padding: 10px 0;
  border-bottom: 1px solid #e4e4e4;
}

.more-name {
  text-align: right;
  color: #999;
  padding-right: 10px;
}
.list-icon {
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

.list-icon.rotate {
  transform: rotate(-180deg);
}

.title-tag {
  width: 100px;
}

.more-right {
  width: calc(100% - 100px);
}

.line-more > .el-row:last-child .line-text::before {
  display: none;
}
</style>
